<template>
  <div class="performance_container">
        <head_view title="我的业绩" backTo='true'></head_view>
        <article>
            <div class="m_info">
                <div>
                    <div class="m_data clearfix">
                        <div class="fl"><img src="../../../common/images/default_women.png"></div>
                        <div class="fl">
                            <p>小红</p>
                            <p>工号：<em class="fsz">12344</em></p>
                        </div>
                    </div>
                </div>
            </div>
            <!--m_info ed-->
            <div class="performance_main">
                <div class="performance_title">
                     <router-link to="/myperformance/fans" tag="div" active-class="select" >
                         <em></em>
                         <i>吸粉</i>
                     </router-link>
                     <router-link to="/myperformance/bind" tag="div" active-class="select"> 
                         <em></em>
                         <i>绑定</i>
                     </router-link>
                     <router-link to="/myperformance/achievement" tag="div" active-class="select">
                         <em></em>
                         <i>业绩</i>
                     </router-link>
                </div>
                <router-view></router-view>
            </div>
    </article>
  </div>
</template>

<script>
import Head from '../../public/head.vue';
  export default {
    data () {
      return {

      }
    },
    components:{
       head_view:Head
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.performance_container{
    position: absolute;
    width:100%;
    height: 100%;
    background-color: #fff;
    article{
        width:100%;
        position:absolute;
        top:1rem;
        bottom:0;
        overflow-x:hidden;
        overflow-y:hidden;
        .m_info{
            width:100%;
            height:1.5rem;
            background-color:#fff;
            &>div{
                width:92%;
                margin:0 auto;
                height:1.5rem;
                .m_data{
                    width:100%;
                    height:1.5rem;
                    &>div:nth-child(1){
                         width:1.34rem;
                         img{
                            width:1rem;
                            height:1rem;
                            border-radius:50%;
                            -webkit-border-radius:50%;
                            border:0.05rem solid #e7e7e7;
                            margin-top:0.225rem;
                         }
                    }
                    &>div:nth-child(2){
                         width:68%;
                         color:#3e3e3e;
                         font-size:0.3rem;
                         &>p:nth-child(1){
                            margin-top:0.4rem;
                            text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
                         }
                         &>p:nth-child(2){
                            color:#a5a5a5;
                            font-size:0.24rem;
                            text-overflow: ellipsis; overflow: hidden;white-space: nowrap; 
                            margin-top:0.03rem;
                         }
                    }
                }
            }
        }
        .performance_main{
            .performance_title{
                width:92%;
                margin: 0 auto;
                border:0.02rem solid #88bd43;
                border-radius:0.08rem;
                font-size: 0;
                div{
                    display:inline-block;
                    width:33.3%;
                    height: 0.5rem;
                    line-height: 0.5rem;
                    text-align: center;
                    font-size: 0.24rem;
                    border-right: 0.02rem solid #88bd43;
                    box-sizing:border-box;
                    -webkit-box-sizing:border-box;
                    &:nth-child(3){
                        border-right: 0;
                    }
                    em{
                        display: inline-block;
                        width:0.33rem;
                        height: 0.33rem;
                        background:url(../../../common/images/my_grade.png) no-repeat;
                        background-size:1.98rem 0.33rem; 
                        vertical-align: middle;
                        margin-right: 0.04rem;
                    }
                    &:nth-child(1) em{
                        background-position:-0.33rem 0;
                    }
                    &:nth-child(2) em{
                        background-position:-1.32rem 0;
                    }
                    &:nth-child(3) em{
                        background-position:-1.65rem 0;
                    }
                    &.select{
                       background-color: #88bd43;
                       i{
                            color:#fff;
                       }
                    }
                    &:nth-child(1).select em{
                        background-position:-0.66rem 0;
                    }
                    &:nth-child(2).select em{
                        background-position:-0.699rem 0;
                    }
                    &:nth-child(3).select em{
                        background-position:0 0;
                    }
                    i{
                        display: inline-block;
                        color:#88bd43;
                        vertical-align: middle;
                    }
                }
            }
        }
    }
}
</style>




